p5.js 変数と繰り返し
変数
code: var01.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
var x = 60;
var y = 60;
var d = 80;
var interval = 30;
fill(10, 10, 10, 50);
ellipse(x, y, d, d);
ellipse(x + interval, y, d, d);
ellipse(x + interval * 2, y, d, d);
}
繰り返し
code: loop01.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(10);
for (var i = 20; i < 330; i = i + 60){
line(i, 40, i + 60, 360);
}
}
code: loop02a.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(2);
for (var i = 20; i <= 380; i = i + 20){
line(i, 40, i, 360);
}
}
code: loop02b.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(2);
for (var i = 20; i <= 380; i = i + 20){
line(200, 40, i, 360);
}
}
code: loop02c.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
strokeWeight(2);
for (var i = 20; i <= 380; i = i + 20){
line(200, 40, i, 200);
line(i, 200, 200, 360);
}
}
二重ループ
code: loop03a.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(140);
noStroke();
ellipseMode(CORNER);
fill(180);
for (var y = 5; y < height; y += 40 ){
for (var x =5; x < width; x += 40 ){
ellipse(x, y, 30, 30);
}
}
}
code: loop03b.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(140);
noStroke();
ellipseMode(CORNER);
for (var y = 4; y < height; y += 40 ){
for (var x = -196; x < width; x += 40 ){
fill(y/1.5, 180, 180);
ellipse(x+y/2, y, 30, 30);
}
}
}
code: loop04a.js
function setup() {
createCanvas(400, 400);
background(140);
}
function draw() {
rectMode(CENTER);
for (var d = 0; d < 100; d += 10){
rect(200, 200, d, d);
}
}
code: loop04b.js
function setup() {
createCanvas(400, 400);
background(140);
}
function draw() {
rectMode(CENTER);
for (var d = 100; d > 0; d -= 10){
rect(200, 200, d, d);
}
}
code: loop04c.js
function setup() {
createCanvas(400, 400);
background(140);
}
function draw() {
rectMode(CENTER);
for (var y = 50; y <= width; y += 100){
for (var x = 50; x <= width; x += 100){
for (var d = 100; d > 0; d -= 10){
rect(x, y, d, d);
}
}
}
}
参考文献
「Processingをはじめよう 第2版」
https://www.oreilly.co.jp/books/9784873117737/
『Processing　ビジュアルデザイナーとアーティストのためのプログラミング入門』
http://www.bnn.co.jp/books/7770/
#coding #design #p5.js
https://gyazo.com/acf8b2956d7a4ecdffefab87cac51e70